<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>警戒信息报表</title>
		<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript" src="../js/vue-resource.js"></script>
		<link rel="stylesheet" href="../css/my/table.css" />
		<link rel="stylesheet" href="../layui/css/layui.css" />
		<script type="text/javascript" src="../layui/layui.js"></script>
		<link rel="stylesheet" href="../css/my/report.css" />
	</head>

	<body>
		<div id="vue_one" class="div_table layui-form">

			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">日期：</label>
					<div class="layui-input-block">
						<input type="text" id="Time" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<div class="layui-input-block">
						<select id="eq_quipmentAddressId" lay-verify="required">
							<option v-for="(d, index) in device" :value="d.equipmentAddressid">{{d.equipmentAddressid}}</option>
						</select>
					</div>
				</div>
				<div class="layui-inline">
					<div class="layui-input-block">
						<button class="layui-btn" @click="getAlertReport()">查询</button>
					</div>
				</div>
			</div>

			<table class="layui-table">
				<colgroup>
					<col width="150">
					<col width="200">
					<col>
				</colgroup>
				<thead>
					<tr>
						<th>alertEquimentId</th>
						<th>alertTem</th>
						<th>alertHum</th>
						<th>alertRoom</th>
						<th>alertTime</th>

					</tr>
				</thead>
				<tbody>
					<tr v-for="(alert, index) in alertReport">
						<td>
							{{alert.alertEquimentId}}
						</td>
						<td>
							{{alert.alertTem}}
						</td>
						<td>
							{{alert.alertHum}}
						</td>
						<td>
							{{alert.alertRoom}}
						</td>
						<td>
							{{alert.alertTime}}
						</td>
					</tr>

				</tbody>
			</table>
		</div>
	</body>
	<script>
		var v = new Vue({
			el: '#vue_one',
			data: {
				deviceId: 0,
				device: [],
				alertReport: []
			},
			methods: {
				IsDate: function(timeText) {
					//验证时间格式
					var regTime = /^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))$/
					if(regTime.test(timeText)) {
						console.log("时间格式正确");
						return true;
					} else {
						alert("时间格式错误");
						return false;
					}

				},
				getEquipment: function() {
					console.log("请求设备信息")
					this.$http.get('http://localhost:8080/equipmentController/getByEquipment').then(function(res) {
						//console.log(res.body);
						v.device = res.body;
						this.$nextTick(() => {
							// 这里写jquery代码
							$(function() {
								XR();
							})

						})
						console.log(v.device);
					}, function() {
						console.log('请求失败处理');
					});
				},
				getAlertReport: function() {
					console.log("请求警戒报表信息")
					var devicdAddressId = $("#eq_quipmentAddressId").val();
					var time = $("#Time").val();
					if(v.IsDate(time)) {
						this.$http.post('http://localhost:8080/alertReportController/getAlertReportByDay', {
							deviceId: devicdAddressId,
							time: time
						}, {
							emulateJSON: true
						}).then(function(res) {
							loading();
							console.log(res.body);
							v.alertReport = res.body;
							closeLoading()
							titleSum(v.alertReport.length)
						}, function(res) {
							console.log(res.status);
						});
					}

				}
			}
		})

		function loading() {
			layui.use('layer', function() {
				var layer = layui.layer;
				layer.load(1, {
					shade: [0.1, '#fff'] //0.1透明度的白色背景
				});
			});
		}

		function closeLoading() {
			setTimeout(function() {
				layer.closeAll('loading');
			}, 1000);
		}

		function titleSum(sum) {
			layui.use('layer', function() {
				layer.msg('共查询出'+sum+"条记录");
			});
		}

		function XR() {
			layui.use('form', function() {
				var form = layui.form;
				form.render();
				//监听提交
				form.on('submit(formDemo)', function(data) {
					layer.msg(JSON.stringify(data.field));
					return false;
				});
			});
		}

		$(document).ready(function() {
			v.getEquipment();
			XR();
		});

		layui.use('laydate', function() {
			var laydate = layui.laydate;

			//日期时间选择器
			laydate.render({
				elem: '#Time',
			});
		});
	</script>

</html>